<template>
    <div class="main">
        <div class="form-container">
            <div  class="form-main">
                <div class="enter_title">
                     <h2 style="background:#265eff;">应急信息社区通-居民体温上报</h2>
                 </div>
                 <div class="enter_big">
                    <div class="name" >
                        <span class="required" style="color:red">*</span>
                        <label for="name">姓名</label><br/>

                        <input class="form-border" id="name" type="text" name="username" maxlength="15" placeholder="姓名" required="required" v-model="nameModel"  /> <br/>
                    </div>
                    <div class="idNumber" >
                        <!-- <span class="required" style="color:red">*</span>  -->
                        <label for="name">身份证号</label><br/>

                        <input class="form-border" id="idNumber" type="text" name="idNumber"  maxlength="18" placeholder="请填写身份证号"  v-model="idNumber"  /> <br/>
                    </div>
                  <div class="sex" >
                        <!-- <span class="required" style="color:red">*</span> -->
                    <label for="gender" required>性别</label><br/>
                    <div class="form-border form-twoBor">
                        <div style="border: 1px solid #c6c8c9; border-radius:3px;">
                          <el-radio-group v-model="genderModel" @change="genderChange">
                            <el-radio :label="0">男</el-radio><br/>
                            <div></div>
                            <el-radio :label="1">女</el-radio>
                          </el-radio-group>
                        </div>

                    </div>
                  </div>
                  <div class="phoneNum"  >
                        <span class="required" style="color:red">*</span>
                        <label for="phone">联系电话</label><br/>
                        <input class="form-border" id="phone" type="text" name="phoneNum" :maxlength="11" placeholder="请填写联系电话" v-model="phoneModel" /><br/>
                  </div>
                  <div class="residence" >
                        <span class="required" style="color:red">*</span>
                        <label for="name">现居地址</label><br/>
                        <input class="form-border" id="residence" type="text"  readonly @click="showSelectPopup=true" name="residence"  placeholder="请填写所住区域" v-model="residence"  /> <br/>
                    </div>
                    <div class="yy-c currentProvince">
                          <!-- <span class="required" style="color:red">*</span>  -->
                          <label for="name">您所在的小区</label>
                          <input class="form-border" id="currentProvince" type="text" maxlength="20" name="currentProvince"   placeholder="小区"  v-model="community"  /> <br/>
                        </div>
                      <div class="yy-city-distance">
                        <div class="yy-c currentCity" >
                          <!-- <span class="required" style="color:red">*</span>  -->
                          <label for="name">楼栋</label>
                          <input class="form-border" id="currentCity" type="text" maxlength="5" name="currentCity"  placeholder="楼栋"  v-model="building"  /> <br/>
                        </div>
                        <div class="yy-c yy-ccurrentCounty" >
                          <!-- <span class="required" style="color:red">*</span>  -->
                          <label for="name">单元</label>
                          <input class="form-border" id="currentCounty" type="text" name="currentCounty" maxlength="5"  placeholder="单元"  v-model="unit"  /> <br/>
                        </div>
                        <div class="yy-c yy-ccurrentCounty">
                          <!-- <span class="required" style="color:red">*</span>  -->
                          <label for="name">房间号</label>
                          <input class="form-border" id="currentCounty" type="text" name="currentCounty" maxlength="5"  placeholder="房间号"  v-model="roomNumber"  /> <br/>
                        </div>
                      </div>
                    <div id="temperatureId" >
                      <span class="required" style="color:red">*</span>
                      <label  required>体温</label><br/>
                      <input class="form-border" id="temperature" type="text" maxlength="10" placeholder="请填写体温" v-model="temperatureModel"  /> <br/>
                    </div>
                 </div>


            </div>
            <button class="form-submit" type="submit" @click="submitClick">提交</button>
        </div>
        <datetime style="display:none;" v-model="queryTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
         <popup v-model="showSelectPopup" @on-hide="popupChange('hide')" @on-show="popupChange('show')" height="50%">
             <menuLinkage :queryObj="casList" @setCityObj="setCityObj" ref="menuLinkage" />
         </popup>

    </div>
</template>
<script>
import { simpleReport ,queryCityData} from '@/assets/js/service'
import { Confirm , Datetime,PopupPicker,Popup} from 'vux'
import menuLinkage from '../commons/menuLinkage.vue'

export default {
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup,
        menuLinkage
    },
    data () {
        return {
            casList:[],
            casModel:[],
            openSimple:false,
            levelnum:0,
            showPopupPicker:true,
            nameModel:'',
            genderModel: '',
            ageModel:'',
            phoneModel:'',
            showSelectPopup:false,
            symptoModel:[],
            temperatureModel:'',
            feverModel:'1',
            contactModel:'1',
            // 新增
            timeShow:false,
            isFlag: true ,
            // 新增
            idNumber:'',
            guardianName: '',//监护人
            guardianIdNumber: '',//监护人ID
            pregnant:'0', //0 否，1 是否为妇女
            residence: '',//常住地
            currentProvince:'',//当前所在省
            currentCity: '',//当前所在市
            currentCounty: '',//当前所在区/县
            currentCountry: '',//街道/乡/镇（当前所在地）
            currentVillage: '',//社区/村（当前所在地）
            currentLocation: '',//当前所在地（详细住址)
            isChecked: false,
            //
            widows:'0', //0 否，1 是否为老人
            residence: '',//常住地
            healthCondition: '',//目前健康状况（0:正常，1:有症状）
            symptom: '', //'症状（0:无，1:干咳，2:咽痛，3:发热，4:寒战，5:鼻塞）',
            goToDoctor: '',//近期是否医院就诊(0:否，1:是)
            medicalHospital: '',//就诊医院
            medicalResult: '',//诊断结果
            medicalHistory: '',//既往病史
            reportNumber:'',//采集负责人电话
            reportName:'',
            reportPhone: '',
            reportType:'',
            diagnosis:'0',//是否确诊 0 否 1 疑似 2 确诊
            isdiagnosis:'',//救治情况
            issympto:'',
            medicalConditionSymptom:'',
            medicalConditionDiagnosed:'',
            //
            fever: '0',
            backToWuHan: '0',
            queryTime:'填写日期',
            touchPersonIsolation: '0',
            touchPersonLocation:'',
            touchPersonPhone:'',
            touchPersonName:'',
            medicalAdvice:'',
            community:'',
            building:'',
            unit:'',
            roomNumber:''
        }
    },
    created () {
        this.initcascade();
    },
    mounted: function () {
       let personMsg = localStorage.getItem('personMsg');
      //  this.endTime = this.getCurrentDate();
    },
    watch:{
        idNumber(){
         let date = new Date()
         if(this.idNumber.length > 17){
          let ageMuis = date.getFullYear() - this.idNumber.substring(6,10);
          if(ageMuis > 0){
            this.ageModel = ageMuis;
          } else {
            window.vm.$vux.toast.text('证件号填写有误', 'center')
          }
          var num = this.idNumber.charAt(16);
          //console.log(num);
          if(num%2==0){
            // console.log('女');
            this.genderModel = 1
            this.isChecked = true;
          }else{
            this.genderModel = 0
            this.isChecked = true;
          }
         }
        },
        touchPersonIsolation(){
          let touchDistory = document.getElementById('touchDistory');
          if(this.touchPersonIsolation ==1 ){
            touchDistory.style.display = 'block';
          } else{
            touchDistory.style.display = 'none';
          }
        },
        diagnosis(){
          let isdiagnosis = document.getElementById('isdiagnosis');
          if(this.diagnosis != 0){
             isdiagnosis.style.display = 'block'
          } else {
             isdiagnosis.style.display = 'none'
          }
        },
        currentCounty(){
          this.residence = this.currentProvince +'/'+ this.currentCity +'/' + this.currentCounty +'/' +this.currentCountry +'/'+ this.currentVillage;
        },
        currentCountry(){
          this.residence = this.currentProvince +'/'+ this.currentCity +'/'+ this.currentCounty +'/'+ this.currentCountry +'/'+ this.currentVillage;
        // },
        },
        symptoModel(){
          // let issympto = document.getElementById('issympto');
          // if(this.symptoModel.length >0){
          //   this.symptoModel.forEach( item => {
          //     if(item == 0) {
          //       issympto.style.display = 'none';
          //     } else {
          //       issympto.style.display = 'block';
          //     }
          //   });
          // } else {
          //    issympto.style.display = 'none';
          // }
          console.log(this.symptoModel);
        },
        personModel(){
            console.log(this.personModel);
            let personMsg = document.getElementById('personMsg');
            if(this.personModel != 4){
              personMsg.style.display = 'block';
            } else {
              personMsg.style.display = 'none';
            }
        },
        familyModel(){
            console.log(this.familyModel);
            let personMsg = document.getElementById('familyMsgs');
            if(this.familyModel != 4){
              personMsg.style.display = 'block';
            } else {
              personMsg.style.display = 'none';
            }
        }
    },
    methods: {
        setCityObj(_list){
            if(typeof(_list[0])!='undefined'){
                this.currentProvince=_list[0].name;
            }
            if(typeof(_list[1])!='undefined'){
                this.currentCity=_list[1].name;
            }
            if(typeof(_list[2])!='undefined'){
                this.currentCounty=_list[2].name;
            }
            if(typeof(_list[3])!='undefined'){
                this.currentCountry=_list[3].name;
            }else{
                this.currentCountry="";
            }
            if(typeof(_list[4]) !='undefined'){
              this.currentVillage = _list[4].name;
            } else {
              this.currentVillage = '';
            }
            this.showSelectPopup=false;
        },
        initcascade(){
            let _this=this;
            // alert(1);
            queryCityData({"parentCode":"000000"},function(res){
                _this.casList=[];
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                    _this.casList=res.data;
                    _this.$refs.menuLinkage.initData(_this.casList,1);
                    //_this.$refs.menuLinkage.setDefault(['湖北省','武汉市','江夏区'])
                }
            })
        },
        genderChange(){
          console.log('item=>',this.genderModel)
        },
        popupChange(_type){
            console.log("_type==>"+_type);

        },
        showTimePlugin(){
            this.timeShow=true;

        },
        clearTree(){

        },
        changeTime(){
            // console.log("change time")
            // const cqueryTime=Date.parse(this.queryTime);
            // const cendTime=Date.parse(this.endTime);
            // if(cqueryTime > cendTime){
            //     this.queryTime = "开始时间";
            //     window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
            // }
        },
        getCurrentDate(){
              const timeStr = '-';
              const curDate = new Date();
              const curYear =curDate.getFullYear();  //获取完整的年份(4位,1970-????)
              const curMonth = curDate.getMonth()+1;  //获取当前月份(0-11,0代表1月)
              const curDay = curDate.getDate();       //获取当前日(1-31)
              const curWeekDay = curDate.getDay();    //获取当前星期X(0-6,0代表星期天)
              const curHour = curDate.getHours();      //获取当前小时数(0-23)
              const curMinute = curDate.getMinutes();   // 获取当前分钟数(0-59)
              const curSec =curDate.getSeconds();      //获取当前秒数(0-59)
              const Current= curYear+timeStr+curMonth+timeStr+curDay ;
              return Current;
        },
        getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return  unescape(r[2]);
            return null;
        },
        onCancel(){
            this.$router.push({path:"/home",query: {}});
        },
        onConfirm(){
            console.log("确认删除")
        },
        onShow(){
            console.log("显示")
        },
        onHide(){
            console.log("隐藏")
        },
        typeTime(val){
            const d = new Date(val);
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
            return resDate;
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
        submitClick(){
          let _this = this;
          console.log(this.currentLocation)
        // 王骞 2020/02/10 17:00 表单校验部分
          let flg = false;
          let flgAry = [];
          flgAry.push(_this.$verification(this.temperatureModel,0,"体温"));
          flgAry.push(_this.$verification(this.currentProvince,0,"现居地址"));
          flgAry.push(_this.$verification(this.phoneModel,1,"电话"));
          flgAry.push(_this.$verification(this.phoneModel,0,"电话"));
          // flgAry.push(_this.$verification(this.idNumber,4,"身份证号码"));
          flgAry.push(_this.$verification(this.nameModel,0,"姓名"));
          console.log(flgAry);
          flg = flgAry.every((item) => item === true);
          if(flg){
                    var param={
                        "name":this.nameModel,
                        "sex":this.genderModel,
                        "phone":this.phoneModel,
                        "idNumber": this.idNumber,
                        "currentProvince":this.currentProvince,//当前所在省
                        "currentCity": this.currentCity,//当前所在市
                        "currentCounty": this.currentCounty,//当前所在区/县
                        "currentCountry": this.currentCountry,//街道/乡/镇（当前所在地）
                        "currentVillage": this.currentVillage,//社区/村（当前所在地）
                        "temperature":this.temperatureModel,
                        "community":this.community,//小区
                        "building":this.building,//楼号
                        "unit":this.unit,//房间号
                        "roomNumber":this.roomNumber,//房间号
                    };
                     console.log(param)
                    // console.log(param)
                    simpleReport(param,function(res){
                        console.log("返回正常   simpleReport==》",res)
                        if(res.success){
                             _this.$showBottomToast("上报成功")
                            //_this.showconfirm=true;
                        }else{
                            _this.$showBottomToast("请求数据异常！")
                        }
                    })
            }

        }
    }
}
</script>
<style lang="less" scoped>

.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        background: #f8fafb;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        background-size: 100% 100%;
        width: calc(100% -16px);
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        margin-bottom: 10px;
        padding-bottom: 25px;
        .name {
          padding-top: 15px;
        }
        .form-main{
            width: 100%;
            // margin-top: 130px;
            margin-bottom: 30px;
            color: #333333;
            .enter_big{
              width: 100%;
              padding: 0px 20px;
            }
            .warn-content{
                margin-top: 10px;
                margin-bottom: 18px;
                line-height: 30px;
                font-size: 15px;
            }
            h2{
                text-align: center;
                color: #fff;
                width: calc(100% + 40px);
                margin-left: -20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                height: 60px;
                line-height: 60px;
                font-size: 24px;
            }
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 9px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
            }
            .tizheng{
                div{
                    width: 33.3333%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                & > div{
                    width: 100%;
                    .el-radio-group{
                      width: 100%;
                      padding: 5px 10px;
                    }
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        display: block;
                        padding:5px;
                        font-size: 15px;
                    }
                }

            }

        }
        .form-submit{
            width: 90%;
            margin-left: 5%;
            height: 50px;
            background: #228ed9;
            border-radius: 8px;
            color: white;
            font-size: 15px;
            border: none;
            outline: none;
        }
    }
label{
  //  margin-bottom: 15px;
}

input{
    border: 1px solid #cccccc;
}
.el-input__inner{
  color: #fdfdfd;
}
.el-radio{
  /*margin: 5px;*/
  left: -5px;
  .el-radio__label{
    color: #000;
  }
  .el-radio__input.is-checked+.el-radio__label{
    color: #000 !important;
  }
  // .el-radio__input .is-checked+.el-radio__label {
  //   color: #000 !important;
  // }
}
.yy-city-distance{
  display: flex;
  justify-content: center;
  align-items: center;
  .yy-c{
    display: 1;
    margin-right: 10px;
  }
}
#residence{
  font-size: 12px;
  height: 40px;
}
// .yy-input::-webkit-input-placeholder,
//   textarea::-webkit-input-placeholder {
//     /* WebKit browsers */
//     color: red;
//   }
}
</style>
